<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="jbxx">基本信息</span>
            </div>
            <div class="content">
                <div class="jc">
                    <span>姓名</span><br>
                    <span>身份证号</span><br>
                    <span>邮箱</span><br>
                    <span>工作单位</span><br>
                    <span>通讯地址</span><br>
                    <span>开户行</span><br>
                    <span>身份证照</span>
                </div>
                <div class="xx">
                    <table>
                        <tr>
                            <td>{{ fromtable[0].j_name }}</td>
                        </tr>
                        <tr>
                            <td>{{ fromtable[0].j_identity }}</td>
                        </tr>
                        <tr>
                            <td>{{ fromtable[0].email }}</td>
                        </tr>
                        <tr>
                            <td>{{ fromtable[0].j_unit }}</td>
                        </tr>
                        <tr>
                            <td>{{ fromtable[0].j_address }}</td>
                        </tr>
                        <tr>
                            <td>{{ fromtable[0].j_bank }}</td>
                        </tr>
                        <tr>
                            <el-image style="width: 60px; height: 40px" :src="fromtable[0].j_identity_photo"></el-image>
                        </tr>
                    </table>
                </div>
                <div class="jcr">
                    <span>性别</span><br>
                    <span>手机号</span><br>
                    <span>健康状况</span><br>
                    <span>是否退休</span><br>
                    <span>银行卡号</span><br>
                    <span>&nbsp;</span><br>
                    <span>证件照</span>
                </div>
                <div class="tt">
                    <table>
                        <tr>
                            <td>{{ fromtable[0].j_sex === 1 ? '男' : '女' }}</td>
                        </tr>
                        <tr>
                            <td>{{ fromtable[0].j_phone }}</td>
                        </tr>
                        <tr>
                            <td>{{ fromtable[0].j_state }}</td>
                        </tr>
                        <tr>
                            <td>{{ fromtable[0].j_retire === 1 ? '是' : '否' }}</td>
                        </tr>
                        <tr>
                            <td>{{ fromtable[0].j_card }}</td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                            <el-image style="width: 60px; height: 40px" :src="fromtable[0].j_documents_photo"></el-image>
                        </tr>
                    </table>

                </div>
            </div>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="jbxx">任职经历</span>
            </div>
            <el-table :data="table01" stripe style="width: 95%" class="zjb">
                <el-table-column label="序号" width="170" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }} <!-- 自增序号 -->
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位名称" width="240" align="center">
                </el-table-column>
                <el-table-column prop="time" label="入职时间" width="240" align="center">
                </el-table-column>
                <el-table-column prop="specialized" label="职务" width="240" align="center">
                </el-table-column>
                <el-table-column prop="q_office" label="专业" width="240" align="center">
                </el-table-column>
            </el-table>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="jbxx">教育培训</span>
            </div>
            <el-table :data="table02" stripe style="width: 95%" class="zjb">
                <el-table-column label="序号" width="170" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }} <!-- 自增序号 -->
                    </template>
                </el-table-column>
                <el-table-column prop="r_school" label="毕业院校" width="180" align="center">
                </el-table-column>
                <el-table-column prop="specialized" label="专业" width="200" align="center">
                </el-table-column>
                <el-table-column prop="r_degree" label="学历" width="200" align="center">
                </el-table-column>
                <el-table-column prop="r_enrollment_time" label="入学时间" width="200" align="center">
                </el-table-column>
                <el-table-column prop="r_graduation_time" label="毕业时间" width="180" align="center">
                </el-table-column>
            </el-table>
            <el-table :data="table03" stripe style="width: 95%" class="zjb">
                <el-table-column label="序号" width="170" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }} <!-- 自增序号 -->
                    </template>
                </el-table-column>
                <el-table-column prop="l_training" label="培训机构" width="240" align="center">
                </el-table-column>
                <el-table-column prop="l_specialized" label="培训专业" width="240" align="center">
                </el-table-column>
                <el-table-column prop="l_start_date" label="培训开始时间" width="240" align="center">
                </el-table-column>
                <el-table-column prop="l_end_date" label="培训结束时间" width="240" align="center">
                </el-table-column>
            </el-table>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="jbxx">职业职称</span>
            </div>
            <el-table :data="table04" stripe style="width: 95%" class="zjb">
                <el-table-column label="序号" width="170" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }} <!-- 自增序号 -->
                    </template>
                </el-table-column>
                <el-table-column prop="n_certificate" label="职业资格证书" width="180" align="center">
                </el-table-column>
                <el-table-column prop="n_acquire_date" label="取得时间" width="200" align="center">
                </el-table-column>
                <el-table-column prop="n_code" label="证书编号" width="200" align="center">
                </el-table-column>
                <el-table-column prop="n_institution" label="颁发机构" width="200" align="center">
                </el-table-column>
                <el-table-column prop="n_expiration_date" label="有效期" width="180" align="center">
                </el-table-column>
            </el-table>
            <el-table :data="table05" stripe style="width: 95%" class="zjb">
                <el-table-column label="序号" width="170" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }} <!-- 自增序号 -->
                    </template>
                </el-table-column>
                <el-table-column prop="m_name" label="证书名称" width="180" align="center">
                </el-table-column>
                <el-table-column prop="m_code" label="证书编号" width="200" align="center">
                </el-table-column>
                <el-table-column prop="m_job" label="职称" width="200" align="center">
                </el-table-column>
                <el-table-column prop="m_institution" label="颁发机构" width="200" align="center">
                </el-table-column>
                <el-table-column prop="m_get_date" label="获得时间" width="180" align="center">
                </el-table-column>
            </el-table>
        </el-card>
        <div v-if="isApproved" style="display: flex; align-items: center;">
            <h4 style="margin-left: 20px;">审核意见：</h4>
            <el-input type="textarea" class="oij" :rows="4" placeholder="请输入内容" v-model="textarea">
            </el-input>
        </div>
        <el-button plain style="margin-left: 15px; margin-top: 10px;" v-if="isApproved" @click="reject">驳回</el-button>
        <el-button plain style="margin-left: 15px; margin-top: 10px;" v-if="isApproved" @click="through">通过</el-button>
        <el-button plain style="margin-left: 15px; margin-top: 10px;" @click="closePage">取消</el-button>
    </div>
</template>
<script scoped>
import { selectlist, selectlist01, selectlist02, selectlist03, selectlist04, selectlist05, updateExpert } from '@/api/expert/expertdata.js'
export default {
    data() {
        return {
            table01: [],
            tableData: [],
            table02: [],
            table03: [],
            table04: [],
            table05: [],
            expertId: this.$route.query.id,
            expersh: null,
            isApproved: false,
            textarea: '',
            fromtable: [{
                email: '',
                j_address: '',
                j_bank: '',
                j_card: '',
                j_documents_photo: null,
                j_identity: '',
                j_identity_photo: null,
                j_name: '',
                j_opinion: '',
                j_phone: '',
                j_retire: null, // 0 表示未退休
                j_sex: null,    // 1 表示男性
                j_sh_state: null,
                j_state: '',
                j_unit: '',
                jid: null,
            }],
        };
    },
    created() {
        // 在 created 时获取数据
    },
    mounted() {
        this.initializeData();
        
        // 如果需要在 mounted 时执行额外操作，也可以在这里调用
    },
    methods: {
        reject() {
            const exper = {
                jid: this.expertId,
                j_sh_state: 2
            };
            updateExpert(exper).then(response => {
                // 假设 response.data 包含成功的状态信息
                if (response == 1) {
                    // 处理成功的响应
                    this.$message.success('驳回成功!');  // 显示成功消息
                    this.$router.go(-1);
                } else {
                    // 处理业务逻辑上的失败，比如后端返回的是失败状态
                    this.$message.error('驳回失败: ' + response.data.message); // 显示错误消息
                }
            }).catch(error => {
                console.error("获取数据失败:", error);
            });
        },
        //审核通过方法
        through() {
            const exper = {
                jid: this.expertId,
                j_opinion: this.textarea,
                j_sh_state: 1
            };
            console.log(this.expertId);

            console.log(this.textarea);
            updateExpert(exper).then(response => {
                // 假设 response.data 包含成功的状态信息
                if (response == 1) {
                    // 处理成功的响应
                    this.$message.success('成功通过!');  // 显示成功消息
                    this.$router.go(-1);
                } else {
                    // 处理业务逻辑上的失败，比如后端返回的是失败状态
                    this.$message.error('通过失败: ' + response.data.message); // 显示错误消息
                }
            }).catch(error => {
                console.error("获取数据失败:", error);
            });
        },
        closePage() {
            // 关闭当前页面
            this.$router.go(-1);
            // this.isApproved = true; // 显示审核界面
        },
        initializeData() {
            // 获取路由参数
            this.expertId = this.$route.query.id; // 从路由中获取 expertId
            this.expersh = this.$route.query.sh;
            // 通过 expertId 查询专家的详细信息
            this.fetchExpertData(this.expertId);
        },
        editInfo() {
            alert("编辑信息功能尚未实现");
        },
        fetchExpertData(expertId) {
            const params = {
                jid: expertId
            };

            //判断是审核还是查看
            if (this.expersh == 0) {
                this.isApproved = true; // 显示审核界面
            }
            selectlist(params).then(response => {
                this.tableData = response; // 将返回的数据设置到表格中
                console.log(response, "是否发多少");

                this.fromtable = response
            }).catch(error => {
                console.error("获取数据失败:", error);
            });

            selectlist01(params).then(response => {
                this.table01 = response; // 将返回的数据设置到表格中
                this.$set()
            }).catch(error => {
                console.error("获取数据失败:", error);
            });

            selectlist02(params).then(response => {
                this.table02 = response; // 将返回的数据设置到表格中
            }).catch(error => {
                console.error("获取数据失败:", error);
            });
            selectlist03(params).then(response => {
                this.table03 = response; // 将返回的数据设置到表格中

            }).catch(error => {
                console.error("获取数据失败:", error);
            });
            selectlist04(params).then(response => {
                this.table04 = response; // 将返回的数据设置到表格中

            }).catch(error => {
                console.error("获取数据失败:", error);
            });
            selectlist05(params).then(response => {
                this.table05 = response; // 将返回的数据设置到表格中

            }).catch(error => {
                console.error("获取数据失败:", error);
            });


        }
    },

}
</script>
<style scoped>
.oij {
    width: 900px;
}

.box-card {
    margin-top: 0px;
}

.xx table tr {
    height: 50px;
}

.xx {
    width: 78%;
    position: absolute;
    left: 211px;
    top: 62px;
}

.tt table tr {
    height: 50px;
}

.tt {
    width: 85%;
    position: absolute;
    left: 760px;
    top: 62px;
}

.custom-divider {
    width: 98%;
    /* 设置分隔线的长度 */
    margin-left: 15px;
    margin-top: 2px;
}

.jbxx {
    font-weight: bold;
    /* 加粗 */
    font-size: 14px;
    /* 字体大小 */
    margin-left: 30px;
}

.jc {
    width: 180px;
    height: 350px;
    background-color: rgb(231, 231, 231);
    text-align: center;
    margin-top: 5px;
}

.jc span {
    margin-top: 14px;
    margin-bottom: 15px;
    /* 这里的值可以根据需求调整 */
    display: inline-block;
    /* 使 margin 生效 */
}

.jcr {
    width: 180px;
    height: 350px;
    background-color: rgb(231, 231, 231);
    text-align: center;
    position: absolute;
    left: 580px;
    top: 62px;
}

.jcr span {
    margin-top: 17px;
    margin-bottom: 14px;
    /* 这里的值可以根据需求调整 */
    display: inline-block;
    /* 使 margin 生效 */
}

table {
    border-collapse: collapse;
    /* 合并边框 */
    width: 40%;
    /* 表格宽度 */
}

td {
    border: 1px solid #f2f2f2;
    /* 设置单元格的边框颜色 */
    padding: 8px;
    /* 内边距 */
    text-align: left;
    /* 左对齐 */
    background-color: #fff;
    /* 单元格背景颜色 */
}

tr:nth-child(even) {
    background-color: #f2f2f2;
    /* 隔行变色 */
}
</style>